<template>
  <view
    class="s-nav-bar"
    :style="{
      height: `${height}px`,
      backgroundColor,
      paddingTop: `${safeAreaInsetTop ? safeAreaTop : 0}px`,
      boxShadow: shadow ? '0 1px 6px #ccc' : '',
    }"
  >
    <view
      class="left"
      :style="{ width: `${leftWidth}rpx`, color }"
      @click="handleClick('left')"
    >
      <block v-if="$slots.left">
        <slot name="left" />
      </block>
      <block v-else>
        <block v-if="leftText">{{ leftText }}</block>
        <block v-else>
          <uni-icons v-if="back" :type="leftIcon" size="20" :color="color" class="icon" />
        </block>
      </block>
    </view>
    <view class="title" :style="{ color }">
      <block v-if="$slots.default">
        <slot />
      </block>
      <block v-else>
        {{ title || titleText }}
      </block>
    </view>
    <view
      class="right"
      :style="{ width: `${rightWidth}rpx`, color }"
      @click="handleClick('right')"
    >
      <block v-if="$slots.right">
        <slot name="right" />
      </block>
      <block v-else>
        <block v-if="rightText">{{ rightText }}</block>
        <block v-else>
          <uni-icons :type="rightIcon" size="20" :color="color" class="icon" />
        </block>
      </block>
    </view>
  </view>
</template>

<script setup>
import { watch, ref } from "vue";
import { useRoute, useRouter } from "simpleRouter";
const route = useRoute();
const router = useRouter();
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
import { useAppStore } from "@/store";
const { safeAreaTop } = useAppStore();

let titleText = ref("");

watch(
  [route, locale],
  (value) => {
    titleText.value = t(value[0].meta.title.replaceAll("%", ""));
  },
  {
    immediate: true,
    deep: true,
  }
);

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  leftText: {
    type: String,
    default: "",
  },
  rightText: {
    type: String,
    default: "",
  },
  leftIcon: {
    type: String,
    default: "left",
  },
  rightIcon: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "#000000",
  },
  backgroundColor: {
    type: String,
    default: "#fff",
  },
  safeAreaInsetTop: {
    type: Boolean,
    default: true,
  },
  height: {
    type: [Number, String],
    default: 44,
  },
  leftWidth: {
    type: [Number, String],
    default: 80,
  },
  rightWidth: {
    type: [Number, String],
    default: 80,
  },
  back: {
    type: Boolean,
    default: true,
  },
  autoBack: {
    type: Boolean,
    default: true,
  },
  shadow: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["clickLeft", "clickRight"]);
const handleClick = (type) => {
  if (type == "left") {
    if (props.autoBack) {
      router.back(1);
    } else {
      emits("clickLeft");
    }
  }
  if (type == "right") {
    emits("clickRight");
  }
};
</script>

<style lang="scss" scoped>
.s-nav-bar {
  display: flex;
  flex-direction: row;
  line-height: 1;
  padding-left: 20upx;
  padding-right: 20upx;
  .title {
    font-size: 28upx;
    margin: 0 20upx;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .left,
  .right {
    display: flex;
    align-items: center;
    .icon {
      height: auto;
      width: auto;
    }
  }
  .left {
    justify-content: flex-start;
  }
  .right {
    justify-content: flex-end;
  }
}
</style>
